
import { motion, useMotionValue, useTransform } from "framer-motion";

const MotionValue = () => {

  const radiusMV = useMotionValue(0)

  const radius = useTransform(radiusMV, [-200, 200], [10, 40])


  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height: '500px'
      }}
    >
      <motion.div
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'white',
          borderRadius: radius
        }}
      >
      </motion.div>
      <motion.div
        style={{
          x: radiusMV,
          height: 20,
          width: 6,
          borderRadius: 2,
          backgroundColor: 'white',
          cursor: 'pointer',
          y: 20
        }}
        drag="x"
        dragMomentum={false}
      >

      </motion.div>
      <motion.span
        style={{
          y: 30,
          letterSpacing: 2,
          color: '#333',
          opacity: 0.7
        }}
      >
        左右拖动我
      </motion.span>
    </div>

  )
}



export default MotionValue;